/**
 * @Title: tab5.js
 * @Description: tab4
 * @author: Fanchao
 * @date: 2021/2/5 10:26 上午
 * @version V1.0
 */
import React, { useEffect } from 'react';
import { nsetConditionIsValid } from 'api/index';
import { Button, message, Switch, Table } from 'antd';
import styles from '@/pages/teaching-quality/compute-scheme/index.less';
import SectionTitle from 'components/SectionTitle';
import { connect } from 'umi';
import Modal5 from '@/pages/teaching-quality/compute-scheme/components/Modal5';

const Tab5 = ({ computeScheme: { tab5List }, dispatch, loading }) => {
    useEffect(() => {
        dispatch({
            type: 'computeScheme/getTab5List',
        });
    }, []);
    const updateItem = item => {
        dispatch({
            type: 'computeScheme/setTab5Show',
            payload: true,
        });
        dispatch({
            type: 'computeScheme/setItem5Data',
            payload: item,
        });
    };

    const handleClickUpdateState = async (item) => {
        const params = JSON.parse(JSON.stringify(item));
        params.valid = !item.valid;
        const result = await nsetConditionIsValid(params);
        if (result.status === 'success') {
            dispatch({
                type: 'computeScheme/getTab5List',
            });
        } else {
            message.error(result.message);
        }
    };
    const columns = [
        // {
        //     title: '序号',
        //     align: 'left',
        //     render: (text, row, index) => {
        //         console.log(text);
        //         console.log(row);
        //         console.log(index);
        //         return {
        //             children: index + 1,
        //             props: {
        //                 rowSpan: row.rowSpan,
        //             },
        //         };
        //     },
        // },
        {
            title: '确定条件',
            align: 'left',
            render: item => `${item.notPassResultCondition}`,
        },
        {
            title: '条件数值',
            align: 'left',
            render: item => {
                if (item.notPassResultCondition.includes('X') || item.notPassResultCondition.includes('Y')) {
                    return `X=${item.conditionValueOne}，Y=${item.conditionValueTwo}`;
                } else {
                    return `[${item.conditionValueOne}，Y=${item.conditionValueTwo}]`;
                }
            },
        },
        {
            title: '是否启用',
            align: 'left',
            render: item => <Switch onClick={() => handleClickUpdateState(item)} checkedChildren="开启"
                                    unCheckedChildren="关闭" checked={item.valid}/>,
        },
        {
            title: '操作',
            align: 'left',
            render: (item) => {
                return (
                    <div>
                        <Button style={{ padding: 2, fontWeight: 'bold' }} type="link"
                                onClick={() => updateItem(item)}>修改</Button>
                    </div>
                );
            },
        },
    ];
    return (
        <div className={styles.pageContainerTable}>
            <SectionTitle title={'已有不合格等级确定条件设置'}/>
            <div className={styles.tableContainer}>
                <Table
                    bordered={false} // 是否有边框
                    rowKey={'passResultConditionId'} // 唯一key值
                    loading={loading} // 加载动画
                    columns={columns} // 表头
                    dataSource={tab5List}
                    pagination={false}
                />
            </div>
            <Modal5/>
        </div>
    );
};
export default connect(({ computeScheme, dispatch, loading }) => ({
    computeScheme,
    dispatch,
    loading: loading.effects['computeScheme/getTab5List'],
}))(Tab5);
